<template>
  <custom-layout :isTabBar="false" navTitle="操作详情">
    <view class="details">
      <uni-list class="user-info">
        <uni-list-item v-for="item in items" :key="item.key" :title="item.label" :rightText="model[item.key]" />
      </uni-list>
      <view class="json-code">
        <view class="title">请求参数</view>
        <view class="code">{{ handleJsonCode(model.requestParam) }}</view>
        <view class="border-bottom"></view>
      </view>

      <view class="json-code">
        <view class="title">响应参数</view>
        <view class="code">{{ handleJsonCode(model.respondJson) }}</view>
        <view class="border-bottom"></view>
      </view>

      <view class="placeholder"></view>
    </view>
  </custom-layout>
</template>

<script>
import { getLogOperation } from "@/api/system/logOperation";
export default {
  data() {
    return {
      items: [
        { key: "id", label: "ID", icon: "" },
        { key: "moduleName", label: "模块名称", icon: "" },
        { key: "methodName", label: "方法名称", icon: "" },
        { key: "businessName", label: "业务类型", icon: "" },
        { key: "operatorName", label: "操作用户", icon: "" },
        { key: "requestIp", label: "主机地址", icon: "" },
        { key: "requestLocation", label: "操作地点", icon: "" },
        { key: "createTime", label: "操作时间", icon: "" },
        { key: "costTimeString", label: "消耗时间", icon: "" },
        { key: "requestMode", label: "请求方式", icon: "" },
        { key: "requestUrl", label: "请求URL", icon: "" },
      ],
      model: {},
    };
  },
  onLoad(options) {
    getLogOperation(options.id).then((res) => (this.model = res));
  },
  mounted() {},
  methods: {
    handleJsonCode(value) {
      if (!value) return "";

      return JSON.stringify(JSON.parse(value), null, 2);
    },
  },
};
</script>

<style lang="scss" scoped>
.details {
  width: 100%;
}

.json-code {
  width: 100%;
  padding: 12px 15px;
  background-color: #fff;
  color: #3b4144;
  font-size: 14px;
  box-sizing: border-box;
  position: relative;

  .code {
    color: #999;
    font-size: 12px;
    margin-top: 4px;
    white-space: pre-wrap;
  }

  .border-bottom {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    background-color: #e5e5e5;
  }
}
</style>
